<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <small-header></small-header>
  </div>
</template>

<script>
import SmallHeader from "./components/SmallHeader.vue";
export default {
  name: "App",
  data() {
    return {
      msg: "yangyang很帅！！",
    };
  },
  components: {
    SmallHeader,
  },
};
/* 
拆分组件
  一定要依据一定的规则去拆分  我建议是按照位置去拆
  最外层的组件一定是app
实现静态组件
实现动态组件
  设计初始化数据 初始化数据是什么数据类型一定考虑情况
  组件之间的交互

*/
</script>

<style lang="scss" scoped>
.box {
  width: 750px;
  height: 100px;
  background-color: red;
  .inner {
    width: 50px;
    height: 50px;
    background-color: pink;
  }
}
</style>
